<!-- craftassist_task_preview.html -->
<!-- Bootstrap v3.0.3 -->
<link
  rel="stylesheet"
  href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Modal --><!-- MODAL -->

<div
  aria-hidden="true"
  aria-labelledby="exampleModalLabel"
  class="modal fade bd-example-modal-lg"
  id="exampleModal"
  role="dialog"
  tabindex="-1"
>
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button
          aria-label="Close"
          class="close"
          data-dismiss="modal"
          type="button"
        >
          <span aria-hidden="true"> &times; </span>
        </button>
      </div>

      <div class="modal-body" id="modal"></div>

      <div class="modal-footer">
        <button class="btn btn-secondary" data-dismiss="modal" type="button">
          Close
        </button>
      </div>
    </div>
  </div>
</div>

<!-- Content -->

<section
  class="container"
  id="Other"
  style="
    margin-bottom: 15px;
    padding: 10px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 0.9em;
  "
>
  <div class="row col-xs-12 col-md-12">
    <!-- Instructions -->
    <div class="panel panel-primary">
      <div class="panel-heading">
        <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#instructionsWrapper" aria-expanded="false" aria-controls="instructionsWrapper">
          Click here to view/hide instructions
        </button>
      </div>
      <div class="collapse" id=instructionsWrapper>
        <div id="instructions">
          <h1><strong>Interact with an assistant in a 3-D world</strong></h1>    
          <img src="https://craftassist.s3-us-west-2.amazonaws.com/pubr/new_vw1_labeled.png" class="previews"></iframe>	
            <img src="https://craftassist.s3-us-west-2.amazonaws.com/pubr/new_vw2_labeled.png" class="previews"></iframe>	
            <img src="https://craftassist.s3-us-west-2.amazonaws.com/pubr/new_vw3_labeled.png" class="previews"></iframe>	
          <p>
            <h3>You are playing a game in a 3-D world with an assistant who can help you.</h3>
            <h4>Use your imagination and creativity to <i>interact with the assistant by asking it to do things.</i></h4>
          </p>
        
          <p><b style="color: red;">IMPORTANT - Please note that you will only get paid if you:
            <ol>
              <li>Click "Start" in the bottom right to begin session.</li>
              <li>Interact with the assistant for the <i>full 5 minutes.</i></li>
              <li>Click on "End" in the bottom right.</li>
              <li>Click on "Submit" button at the bottom.</li>
            </ol>
          </b></p>

          <h3>Example Task Interface</h3>
          <img class=center src="https://craftassist.s3-us-west-2.amazonaws.com/pubr/mturk_dashboard_2022.png" width="60%"></iframe>	

          <h3>How to move around the 3-D world</h3>
          <p>
            <ul>
              <li>Click on the upper right pane to enter the game.</li>
              <li>Press ‘w/a/s/d’ buttons to move forward/left/back/right and ‘space’ to jump.</li>
              <li>Press ‘esc’ to leave the world.</li>
            </ul>
          </p>            
          
          <h3>Interacting with the assistant</h3>
          <p>
            Please use the <b>chat box in the top left pane</b> to speak with and instruct the assistant. <br>
            We ask that you interact with the assistant for <b>at least 5 minutes.</b>
            <img class=center src="https://craftassist.s3-us-west-2.amazonaws.com/pubr/mturk_dashboard_2022_chat_highlight.png" width="60%"></iframe>	
          </p>
          <p>
            <ul>
              <li><b>Press “submit” just below the chat box to send the command to the assistant.</b></li>
              <li><b>The assistant might be slow to respond. Please be patient and do not send multiple commands at a time.</b></li>
              <li>You should then see the assistant execute the command in the 3-D world.</li>
              <li>The assistant might also send you replies below the chat box.</li>
              <li>In the bottom left pane are the last 5 commands you’ve sent.</li>
            </ul>
          </p>

          <p>
            <h3>Assistant Capabilities</h3>
            <h4 style="color: red;">Keep in mind that the assistant is non-violent!</h4>
            <ul>
              <li><b>Move</b> (to a place or structure)</li>
              <li><b>Build</b> (a shape or structure)</li>
              <li><b>Destroy</b></li>
              <li><b>Dance</b></li>
              <li><b>Get</b> (an object)</li>
              <li><b>Tag</b> (rename something)</li>
              <li><b>Dig</b></li>
              <li><b>Copy</b> (make a copy of an object)</li>
              <li><b>Undo</b></li>
              <li><b>Fill</b> (up a hole or structure)</li>
              <li><b>Spawn</b> (create an animal)</li>
              <li><b>Answer</b> (a question)</li>
              <li><b>Stop</b> </li>
              <li><b>Resume</b> (an earlier action)</li>
            </ul>
          </p>

          <p>
            <b>Example Command 1: </b>"Build a red square there"<br>
            <b>Example Command 2: </b>"Dig a hole next to this red square"
          </p>
          
          <h3> Mark Errors <b style="color: red;">- Very Important!</b></h3>
          <p>
            If the assistant fails to do something you asked, you must click the <b style="color:red;">MARK ERROR</b> button.
          </p>
          <img class=center src="https://craftassist.s3-us-west-2.amazonaws.com/pubr/mark_errors_big_button.png" width="80%"></iframe>
          
          <!--<p>If the assistant fails, you will be prompted for more information.</p> -->

          <p>
            <h3 style="color:red;">Improving Agent Vision:</h3>
            <p>
              We are trying to teach the assistant to see better.  You can help by sending commands that refer to
              things in the world that the assistant doesn't already know about.  Here are some examples:
            </p>
            <ul>
              <li>Use synonyms for things in the world, like "boulder" instead of "sphere"</li>
              <li>Refer to parts of things, like "the corner of the ledge"</li>
              <li>Use adjectives that describe the object, like its size or color</li>
            </ul>
            <p>
              If/when the assistant fails to perform the task, follow the prompts carefully about what kind of error.
            </p>
            <h3>Tips</h3>
            <ul>
              <li><b>Be creative! Make the interaction interesting, within the assistant's capabilities.</b></li>
              <li><b>Please use as much variety as you can! Don't give the same commands over and over</b></li>
            </ul>
          </p>

          <p>
            <h3 style="color:red;">Rejection policy - You HIT will be rejected if any of these are violated:</h3>
          </p>
          
          <ul>
            <li>The commands must be valid English sentences.</li>
            <li>The commands must use the above list of capabilities</li>
            <li>All commands must be unique.</li>
            <li>If you do multiple HITs, you must use new commands each time.</li>
          </ul>
        </div>
      </div>
    </div>
    <!-- End Instructions -->
  </div>
</section>

<section
  class="container-fluid"
  id="Other"
  style="
    margin-bottom: 15px;
    padding: 10px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 0.9em;
  "
>
  <div class="row">
    <!-- Commands Reminder -->
    <div class="col-xs-2">
      <div class="panel panel-primary" style="height:800px;">
        <div class="panel-heading">
          <strong>Assistant Capabilities</strong>
        </div>
        <p>
          <ul>
            <li><b>Move</b> (to a place or structure)</li>
            <li><b>Build</b> (a shape or structure)</li>
            <li><b>Destroy</b> (a structure)</li>
            <li><b>Dance</b></li>
            <li><b>Get</b> (an object)</li>
            <li><b>Tag</b> (rename something)</li>
            <li><b>Dig</b></li>
            <li><b>Copy</b> (make a copy of an object)</li>
            <li><b>Undo</b></li>
            <li><b>Fill</b> (up a hole or structure)</li>
            <li><b>Spawn</b> (create an animal)</li>
            <li><b>Answer</b> (a question)</li>
            <li><b>Stop</b> </li>
            <li><b>Resume</b> (an earlier action)</li>
          </ul>
        </p>
        <p style="color:red;">
          Help the assistant learn to see better by refering to things it doesn't already know about!
          See the instructions near the end for more detail.
        </p>
      </div>
    </div>
    <!-- End Commands Reminder -->
    <div class="col-xs-10">
      <iframe style="width:100%; height:800px;" src="https://${subdomain}.craftassist.io/"></iframe>
    </div>
  </div>
</section>


<script>
  $(function () {
    modal_body = $("#modal");
    $("#instructions").clone().appendTo(modal_body);
    //$(".modal").modal("show");
  });
</script>

<style type="text/css">
  p, ul, ol {
    font-size: 1.1em;
  }

  h1 {
    text-align: center;
  }

  fieldset {
    padding: 10px;
    background: #fbfbfb;
    border-radius: 5px;
    margin-bottom: 5px;
  }

  .center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

  .input_location {
    background-color: blanchedalmond;
    padding: 10px;
  }
</style>
